import { App, FunctionPlugin, ObjectPlugin } from 'vue'
import { config } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import 'katex/dist/katex.min.css'
import 'cropperjs/dist/cropper.css'
import 'highlight.js/styles/atom-one-dark.css'
import '@/assets/js/iconfont.js'
// 引入公共库中的预览主题
import '@/assets/css/markdom-theme.css'

const prettier = import('prettier')
const parserMarkdown = import('prettier/parser-markdown')
const highlight = import('highlight.js')
const screenfull = import('screenfull')
const katex = import('katex')
const Cropper = import('cropperjs')
const mermaid = import('mermaid')

const markExtension = import('markdown-it-mark')

const doImport = () => {
  Promise.all([
    prettier,
    parserMarkdown,
    highlight,
    screenfull,
    katex,
    mermaid,
    Cropper,
    markExtension,
  ]).then(
    ([prettier, parserMarkdown, highlight, screenfull, katex, mermaid, Cropper, markExtension]) => {
      config({
        editorExtensions: {
          prettier: {
            prettierInstance: prettier.default,
            parserMarkdownInstance: parserMarkdown.default,
          },
          highlight: {
            instance: highlight.default,
          },
          screenfull: {
            instance: screenfull.default,
          },
          katex: {
            instance: katex.default,
          },
          cropper: {
            instance: Cropper.default,
          },
          mermaid: {
            instance: mermaid.default,
          },
        },
        markdownItConfig(md) {
          md.use(markExtension.default)
        },
      })
    }
  )
}
const mdEditorV3Plugin: FunctionPlugin | ObjectPlugin = {
  install: (_app: App) => {
    doImport()
  },
}

export default mdEditorV3Plugin
